<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Client Login</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/loginstyle.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/jconfirmaction.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/popup_css.css" />

<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader", 
	contentclass: "submenu", 
	revealtype: "click", 
	mouseoverdelay: 200,
	collapseprev: true, 
	defaultexpanded: [], 
	onemustopen: false, 
	animatedefault: false, 
	persiststate: true, 
	toggleclass: ["", ""], 
	togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], 
	animatespeed: "fast", 
	oninit:function(headers, expandedindices){ 
	},
	onopenclose:function(header, index, state, isuseractivated){ 
	}
})

	
	$(document).ready(function() {
		
		
		$('#close').click(function(){
	        parent.history.back();
	        return false;
	    });
		
		$("#submit").click(function(event) { 
			var x=0;
			
			
			 if(document.getElementById('unameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('umailErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('pwdnameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('pnameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('regnameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('tpwdnameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('lnameErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('phoneErrorLable').innerHTML!=""){
				x=1;
			}
			else if(document.getElementById('mobileErrorLable').innerHTML!=""){
				x=1;
			}
		
		else if(document.getElementById('countryErrorLable').innerHTML!=""){
			x=1;
		}
		
		else if(document.getElementById('cityErrorLable').innerHTML!=""){
			x=1;
		}
			if(x==0){
			var reqUrl="./broker/registration";
			
				var jsondata = JSON.stringify({ "brokerId":$("#brokerId").val(),"fname":$("#fname").val(),"mname":$("#mname").val(),
					"lname":$("#lname").val(),"password":$("#pwd").val(),"regno":$("#regno").val(),"transpwd":$("#transpwd").val(),
					"gender":$("#gender").val(),"phone":$("#phone").val(),"mobile":$("#mobile").val(),"emailID":$("#emailID").val(),
					"paddress":$("#paddress").val(),"caddress":$("#caddress").val(),"postcode":$("#postcode").val(),
					"city":$("#city").val(),"country":$("#country").val(),"idproof":$("#idproof").val(),"idproofno":$("#idproofno").val()});
		
		$.ajax(
			  {
			  type: "POST",
			  url: reqUrl,
			  dataType: "json",
			  contentType: 'application/json',	  
			  data:jsondata, 
			  success: function(jsonResponse) { 
				 
				    alert(jsonResponse["msg"]);
				      document.getElementById("brokerId").value="";
					  document.getElementById("fname").value="";
					  document.getElementById("mname").value="";
					  document.getElementById("lname").value="";
					  document.getElementById("pwd").value="";
					  document.getElementById("regno").value="";
					  document.getElementById("transpwd").value="";
					  document.getElementById("gender").value="";
					  document.getElementById("phone").value="";
					  document.getElementById("mobile").value="";
					  document.getElementById("emailID").value="";
					  document.getElementById("paddress").value="";
					  document.getElementById("caddress").value="";
					  document.getElementById("postcode").value="";
					  document.getElementById("city").value="";
					  document.getElementById("country").value="";
					  document.getElementById("idproof").value="";
					  document.getElementById("idproofno").value="";
			  }
			  
			});
			} 
		});
	});
	
function formvalidation(){
	var email_check = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	var alpha_num_check = /^([a-zA-Z0-9\s])+$/;
	var alpha_check = /^([a-zA-Z\.\s])+$/;
	var phone_check= /\(?\d{2}\)?([-\/\.])\d{3}\1\d{4}/;
	var website_check= /^(http|ftp):\/\/(www\.)?.+\.(com|net|org)$/;
	
	var error	=	false;
	
	document.getElementById('unameErrorLable').innerHTML="";
	document.getElementById('umailErrorLable').innerHTML="";
	document.getElementById('pnameErrorLable').innerHTML="";
	document.getElementById('lnameErrorLable').innerHTML="";
	document.getElementById('pwdnameErrorLable').innerHTML="";
	document.getElementById('regnameErrorLable').innerHTML="";
	document.getElementById('tpwdnameErrorLable').innerHTML="";
	document.getElementById('phoneErrorLable').innerHTML="";
	document.getElementById('mobileErrorLable').innerHTML="";
	document.getElementById('cityErrorLable').innerHTML="";
	document.getElementById('countryErrorLable').innerHTML="";
		if((document.getElementById('brokerId').value)==''){
			document.getElementById('unameErrorLable').innerHTML='*Enter BrokerId .';
			error	=	true;
		}
		
		 if((document.getElementById('emailID').value)==''){
			document.getElementById('umailErrorLable').innerHTML='*Enter  E-mail id.';
			error	=	true;
		}else if(!email_check.test(document.getElementById('emailID').value)){
			document.getElementById('umailErrorLable').innerHTML="";
			document.getElementById('umailErrorLable').innerHTML='*Enter E-mail id in proper format.';
			error	=	true;
		}
		
			if((document.getElementById('fname').value)==''){
			document.getElementById('pnameErrorLable').innerHTML='*Enter First name.';
			error	=	true;
		}else if(!alpha_check.test(document.getElementById('fname').value)){
			document.getElementById('pnameErrorLable').innerHTML="";
			document.getElementById('pnameErrorLable').innerHTML='*Enter First name in alphabatic format.';
			error	=	true;
		}
			if((document.getElementById('lname').value)==''){
				document.getElementById('lnameErrorLable').innerHTML='*Enter Last name.';
				error	=	true;
			}else if(!alpha_check.test(document.getElementById('lname').value)){
				document.getElementById('lnameErrorLable').innerHTML="";
				document.getElementById('lnameErrorLable').innerHTML='*Enter Last name in alphabatic format.';
				error	=	true;
			}
			if((document.getElementById('pwd').value)==''){
				
				document.getElementById('pwdnameErrorLable').innerHTML='*Enter  Password.';
				error	=	true;
			}else if(document.getElementById('pwd').value.length<=7){
				document.getElementById('pwdnameErrorLable').innerHTML="";
				document.getElementById('pwdnameErrorLable').innerHTML='* Password Atleast 8 Character Min.';
				error	=	true;
			}
			if((document.getElementById('regno').value)==''){
				document.getElementById('regnameErrorLable').innerHTML='*Enter  Registration number.';
				error	=	true;
			}
			if((document.getElementById('transpwd').value)==''){
				document.getElementById('tpwdnameErrorLable').innerHTML='*Enter Transaction Password.';
				error	=	true;
			}else if(document.getElementById('transpwd').value.length<=8){
				document.getElementById('tpwdnameErrorLable').innerHTML="";
				document.getElementById('tpwdnameErrorLable').innerHTML='*Transaction Password Atleast 8 Character Min.';
				error	=	true;
			}
			if(document.getElementById('phone').value.length>=12){
				document.getElementById('phoneErrorLable').innerHTML='*Phone Number should not be more than 12 digits.';
				error	=	true;
			}
			
			if(document.getElementById('mobile').value.length>=12){
				document.getElementById('mobileErrorLable').innerHTML='*Mobile Number should not be more than 12 digits.';
				error	=	true;
			}
		   if(!alpha_check.test(document.getElementById('country').value)){
				document.getElementById('countryErrorLable').innerHTML="";
				document.getElementById('countryErrorLable').innerHTML='*Enter Country in alphabatic format.';
				error	=	true;
			}
		   if(!alpha_check.test(document.getElementById('city').value)){
				document.getElementById('cityErrorLable').innerHTML="";
				document.getElementById('cityErrorLable').innerHTML='*Enter City in alphabatic format.';
				error	=	true;
			}
		if(error==false){
			return true;
			}else{ 
			return false;
		}
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}	
	

function enter()
	{
	location.href = "clientpage.html";
	}
</script>

<script language="javascript" type="text/javascript" src="js/niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" />

<style>
.reg_form{
width:700px;
height:719px;
background:#fff;
margin:4px 0 0 145px;
float:left;
padding:0px 0 0 0px;
border-radius:10px;
}

.signup{width:96%; float:left; margin:2% 0 0 4%;}

.signup-1{width:94%; float:left; margin-top:18px; }

.signup-1left{width:189px; float:left; border-radius:5px; height:30px;}

.signup-1middle{width:171px; float:left; border-radius:5px; height:30px; margin-left:21px;}

.signup-1right{width:200px; float:right; border-radius:5px; height:30px;}

textarea, .inputtext, .inputpassword {
    border: 1px solid #BDC7D8;
    margin: 0;
    padding: 3px;
}

.signup-2{margin-top:25px; float:left;}
.signup-21{margin-top:16px; float:left;}
.signup-22{margin-top:4px; float:left;}

.signup-3{width:94%; float:left; margin:6px 0px 21px 0px;}

.signup-30{width:94%; float:left; margin:12px 0px 15px 0px;}

.signup-3left{width:157px; float:left; border-radius:5px; height:25px;}

.signup-3right{width:166px; float:left; border-radius:5px; height:25px; margin-left:174px;}

.signup-3-input{width:296px; float:left; border-radius:5px; height:30px;}

.signup-2-input{width:620px; float:left; border-radius:5px; height:30px;}

.join_5 {
    float: right;
    margin-right: 5px;
    width: 200px;
}

.join_3 {
    float: left;
    margin-bottom: 9px;
    margin-top: 10px;
    width: 306px;
}

.join_4 {
    float: left;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 3px;
    text-align: left;
    width: 90px;
	color:#646262;
	font-weight:600;
}

.signup-4{width:98%; float:left; margin-top:20px;}
.signup-4left{width:48%; float:left;}
.signup-4right{width:48%; float:left; margin-left:2%;}

.signup-5{width:94%; float:left; margin-top:20px;}

.signup-button{float:left; width:500px; margin-top:1%;}
.button{background: linear-gradient(#67AE55, #578843) repeat scroll 0 0 #69A74E; border-color: #3B6E22 #3B6E22 #2C5115; box-shadow: 0 1px 1px #A4E388 inset; padding:8px 0px; float:left; width:150px; border-radius:5px; text-align:center; color:#FFFFFF; font-size:18px; font-weight:bold;}

.text-area{width:94%; float:left; border:1px #CCCCCC solid;}
</style>




</head>
<body >
<div id="main_container">

	<div class="header_login">
    <div class="logo"><a href="#"><img src="img/ncmx-logo.png" alt="" title="" border="0" width="200" height="70"/></a></div>
    
    </div>

     
         <div class="reg_form">
         
         <h3>Broker Registration</h3>
        <form id="brokerRegistration" method="post" action="./brokerRegistrationform"> 
         <div class="signup">
            
              <div class="signup-22">
                   	<input name="brokerId" type="text" value="" maxlength="320" id="brokerId" placeholder="Broker Id"  class="signup-2-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                    <div id="unameErrorLable"></div>
                   </div>
                  
                   <br/>
                    <div class="signup-1">
                <div class="signup-1left">
        <input name="fname" type="text" value="" maxlength="170" id="fname" placeholder="First Name" class="signup-1left" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;"  required/>
                <div id="pnameErrorLable"></div>
                </div>
                
                <div class="signup-1middle">
       <input name="mname" type="text" value="" maxlength="170" id="mname" placeholder="Middle Name" class="signup-1left" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" />
                </div>
                        
                 <div class="signup-1right">
         <input name="lname" type="text" value="" maxlength="170" id="lname" placeholder="Last Name" class="signup-1right" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                 <div id="lnameErrorLable"></div>
                 </div>
             </div>
                   
                  
                   
                   <div class="signup-2">
                   	<input name="pwd" type="password" value="" maxlength="320" id="pwd" placeholder="Password"  class="signup-2-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;"  required/>
                   <div id="pwdnameErrorLable"></div>
                   </div>
                   
                   
                    <div class="signup-3">
                     <div class="signup-3left" style="margin-top:13px;">
                   <input name="regno" type="text" value="" maxlength="320" id="regno" placeholder="Registration Number" onkeypress="return isNumberKey(event)" class="signup-3-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                   <div id="regnameErrorLable"></div>
                   </div>
                   
                      <div class="signup-3right" style="margin-top:13px;">
         <input name="transpwd" type="password" value="" maxlength="320" id="transpwd" placeholder="Transaction Password"  class="signup-3-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 2px;" required/>
                 <div id="tpwdnameErrorLable"></div></div>
                </div>
                   
                   
                   <div class="join_3">
						<div class="join_4" >Gender : </div>
                   			<div class="join_5">
                        		<label for="Male" style="font-size:12px; color:#333333;" >
                        		<input  type="radio"  value="Male" name="sex" id="gender"/>Male
                        		</label>
                        			<label for="Female" style="font-size:12px; color:#333333;" >
                        		<input  type="radio" value="Female" name="sex" id="gender"/>Female
                        			</label>
                  			</div>
                  	</div>
                    
              <div class="signup-3">
                 <div class="signup-3left">
                   <input name="phone" type="text" value="" maxlength="320" id="phone" placeholder="Landline Number" onkeypress="return isNumberKey(event)" class="signup-3-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;"  required/>
                   <div id="phoneErrorLable"></div>
                   </div>
                   
                   <div class="signup-3right">
                   <input name="mobile" type="text" value="" maxlength="320" id="mobile" placeholder="Mobile Number" onkeypress="return isNumberKey(event)" class="signup-3-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 2px;"  required/>
                   <div id="mobileErrorLable"></div>
                   </div>
              </div>
                   
                   <div class="signup-21">
                   	<input name="email" type="text" value="" maxlength="320" id="emailID" placeholder="Email Id"  class="signup-2-input"  style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                   <div id="umailErrorLable"></div>
                   </div>
                   
                   
                   <div class="signup-4">
                   		<div class="signup-4left">
                   	<textarea name="paddress" id="paddress" class="text-area" placeholder="Permanent Address" style="border-radius:5px; padding:3px;" required></textarea>
                    	</div>
                        	<div class="signup-4right">
                            <textarea name="caddress" id="caddress" class="text-area" placeholder="Correspondence Address" style="border-radius:5px; padding:3px;" required> </textarea>
                            </div>
           </div>
                   
                   <div class="signup-5">
                <div class="signup-1left">
        <input name="postcode" type="text" value="" maxlength="170" id="postcode" placeholder="Postcode/Zipcode" onkeypress="return isNumberKey(event)" class="signup-1left" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                </div>
                
                <div class="signup-1middle">
       <input name="city" type="text" value="" maxlength="170" id="city" placeholder="City" class="signup-1left" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
               <div id="cityErrorLable"></div> </div>
                        
                 <div class="signup-1right">
         <input name="country" type="text" value="" maxlength="170" id="country" placeholder="Country" class="signup-1right" data-type="text" style="border:1px #c2bdbd solid; padding:2px 5px;" required/>
                <div id="countryErrorLable"></div> </div>
           </div>
          <div class="signup-30">
                     <div class="signup-3left" style="margin-top:16px;">
                   <select id="idproof" onchange="" style="margin-left:0;margin-right:5px;width:307px;border:1px solid #D6D8DA; height:30px; padding:5px; font-size:12px; color:#333333;" name="idproof">
                        <option value="" selected="selected">Select Id Proof</option>
                        <option value="Pan Card">Pan Card</option>
                        <option value="Votor Id Card">Votor Id Card</option>
                        <option value="Driving Licence">Driving Licence</option>
                   </select>
                    </div>
                   
                      <div class="signup-3right" style="margin-top:13px;">
         <input name="idproofno" type="text" value="" maxlength="320" id="idproofno" placeholder="Id Proof Number"  class="signup-3-input" data-type="text" style="border:1px #c2bdbd solid; padding:2px 2px;" required/></div>
                </div>

					<div class="signup-button">
                   		<input class="button" type="button" name="submit" id="submit" value="Register" onclick="formvalidation();"></input>
                   		<!-- <a href="exchangehome"><input class="button" type="button" value="Back" style="margin-left: 100px"></input></a> -->
                    </div>
                    
                    <a class="close" href="#" id="close" style=" right: 281px; top: 111px;"></a>    
                       </form> 
                        </div>
         </div>  
          
    
    <div class="footer_login">
    
    	<div class="left_footer_login"> <a href="#"></a></div>
    	<div class="right_footer_login"><a href="#"></a></div>
    
    </div>

</div>		
</body>
</html>

<!--                                      -->